import Vue from 'vue'
import Vuex from 'vuex'
import { setItem, getItem, removeItem } from '@/utils/storage.js'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 公共数据
    // 初始化数据去localstorage中取值
    // tokenInfo的值是先从本地存储中取，取不到就用{}
    // 如果登录后我们会同时存数据在localstorage中，在刷新的话会先从本地取数据
    tokenInfo: getItem('tokenInfo') || {},
    userInfo: getItem('userInfo') || {}
    // 为什么要多此一举，直接在localstorage中进行就可以了为什么还需要在vuex中存储？
    // 回答：vuex中数据除了可以在全部的组件中共享之外，还有响应式的特点？？
  },
  getters: { // 相当于计算属性
    isLogin (state) {
      if (state.tokenInfo.token) {
        return true
      } else {
        return false
      }
    },
    userPhoto (state) {
      return state.userInfo.photo
    }
  },
  mutations: { // 通过mutations修改公共数据
    mSetToken (state, tokenObj) {
      state.tokenInfo = tokenObj
      // 2. 持久化 刷新后vuex中数据会重新生成
      //  因为如果登录后在刷新我们不点击登录按钮那么就没有token值 所以存储到localstotage中
      setItem('tokenInfo', tokenObj)
      console.log('打印getItem', getItem('tokenInfo'))
    },
    mUpdateName (state, name) {
      state.userInfo.name = name
    },
    mUpdatePhoto (state, photo) {
      state.userInfo.photo = photo
    },
    mUpdateBirthday (state, birthday) {
      state.userInfo.birthday = birthday
    },
    mUpdateGender (state, gender) {
      state.userInfo.gender = gender
    },
    mClearTokenInfo (state) {
      // 保存vuex
      state.tokenInfo = {}
      // 持久化
      removeItem('tokenInfo')
    },
    mSetUserInfo (state, userInfo) {
      state.userInfo.birthday = userInfo.birthday
      state.userInfo.gender = userInfo.gender
      state.userInfo.id = userInfo.id.toString()
      state.userInfo.mobile = userInfo.mobile
      state.userInfo.name = userInfo.name
      state.userInfo.photo = userInfo.photo

      setItem('userInfo', state.userInfo)
    }
  },
  actions: {
  },
  modules: {
  }
})
